<%@page pageEncoding="UTF-8" isELIgnored="false" contentType="text/html; UTF-8" %>
<script>
    $(function () {
        $.post("${pageContext.request.contextPath}/privilege/findAllPrivilege", (result) => {
            //创建权限列表
            createProductList("#tagList", result.privileges);
        }, "JSON");

        $("#add").click(function () {
            $.post("${pageContext.request.contextPath}/privilege/addPrivilege", {
                "privilegeName": $("#name").val(),
                "privilegeLocation": $("#address").val()
            }, function () {
                //查询所有权限数据
                $.post("${pageContext.request.contextPath}/privilege/findAllPrivilege", (result) => {
                    //创建权限列表
                    createProductList("#tagList", result.privileges);
                }, "JSON");
            }, "JSON")
        });

    });

    $(document).on('close.bs.alert', '.alert', function () {
        var id = $($(this).children().get(0)).val();
        if (id == 1){
            alert("root权限无法删除！！");
            return false;
        }
        $.ajax({
            url: '${pageContext.request.contextPath}/privilege/delPrivilege',
            dataType: 'JSON',
            data: {
                'id': id
            },
            type: 'POST',
            success: function (data) {
                console.log(data);
                $.post("${pageContext.request.contextPath}/privilege/findAllPrivilege", (result) => {
                    //创建权限列表
                    createProductList("#tagList", result.privileges);
                }, "JSON");
            }
        });
    });

    //创建权限列表复用函数
    function createProductList(selector, result) {
        $(selector).empty();//清空内容
        $.each(result, (i, tag) => {
            $(selector).append('<div class="col-sm-2" style="padding-left:0px;">' +
                '<div class="alert alert-info alert-dismissible myAlert" role="alert">' +
                '<input type="hidden" value="' + tag.id + '"> ' +
                '<button type="button" class="close myclick" data-dismiss="alert" aria-label="Close"><span class="myclick" aria-hidden="true">&times;</span></button>' +
                '<a href="#" onclick="privilegeModalShow(' + JSON.stringify(tag).replace(/"/g, '&quot;') + ')">' + tag.privilegeName + '</a>' +
                '</div>' +
                '</div>');

        });
    }

    //权限详情模态框展示
    function privilegeModalShow(privielge) {
        $('#privilegeName_modal').val(privielge.privilegeName);
        $('#privilegeLocation_modal').val(privielge.privilegeLocation);
        $('#privilegeModal').modal('show');
    }
</script>
<div class="col-sm-10">
    <div class="row">
        <!--使用pageheader完成水平线-->
        <div class="page-header">
            <h2>权限管理</h2>
        </div>
    </div>
    <div class="row">

        <div class="form-group col-sm-5">
            <input type="text" class="form-control" id="name" name="privilegeName" placeholder="请输入要添加的权限名称">
        </div>
    </div>
    <div class="row">
        <div class="form-group col-sm-5">
            <input type="text" class="form-control" id="address" name="privilegeLocation" placeholder="请输入链接地址">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-2">
            <button type="button" class="btn btn-default" id="add">添加</button>
        </div>
    </div>
    <hr/>
    <br/>
    <div class="row" id="tagList">


    </div>
</div>